<template>
  <div>
    <div 
      v-if="showslider" 
      class="mui-slider">
      <div class="mui-slider-group  mui-slider-loop" >
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img :src="lastpic">
          </a>
        </div>
        <div 
          v-for="(item, index) in slideList" 
          :key="index" 
          class="mui-slider-item">
          <a href="#">
            <img :src="item.img">
          </a>
        </div>
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img :src="firstpic">
          </a>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div
          v-for="(item2, index2) in slideList"
          :key="index2"
          :class="index2==0 ? 'mui-active' : '' "
          class="mui-indicator"
        />
      </div>
    </div>
    <div>
      <div 
        v-for="(item, index) in fhomeData" 
        :key="index" 
        class="pdall">
        <img 
          :src="item.imgtitle" 
          class="pdtb" 
          width="100%">
        <div @click="goSecond(item)">
          <img 
            :src="item.imgcontent" 
            width="100%">
        </div>
      </div>
    </div>
    <div>
      <div class="pdall">
        <img 
          src="images/hr1.png" 
          class="pdtb" 
          width="100%">
        <div 
          v-for="(item4, index4) in xhxy" 
          :key="index4" 
          style="margin-top:10px" 
          @click="gofinfo">
          <div 
            :style="{backgroundImage:'url('+item4.img+')'}" 
            class="mui-card-header mui-card-media"
            style="height: 40vw;"/>

          <p class="zxp">{{ item4.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      slideList: [],
      xhxy: [],
      lastpic: '',
      firstpic: '',
      showslider: false,
      fhomeData: [
        {
          imgtitle: 'images/hr2.png',
          imgcontent: 'images/fhometop2.png',
          imgurl: 'fdetail',
          imgword: '关于协会'
        }
        // {
        //   imgtitle: 'images/hr1.png',
        //   imgcontent: 'images/fhometop3.png',
        //   imgurl: 'fdetail',
        //   imgword: '关于协会'
        // }
      ]
    }
  },
  created() {
    this.gethomeData()
  },
  mounted() {
    console.log('this.slideList', this.slideList)
  },
  methods: {
    gofinfo() {
      this.$router.push({
        name: 'finfo',
        query: {
          from: '首页',
          word: '资讯列表'
        }
      })
    },
    gethomeData() {
      this.spost(this.ts, '/Index/index').then(ts => {
        console.log(ts.d)
        this.slideList = ts.d.data.indexbanner
        let lastpic = this.slideList[this.slideList.length - 1].img
        let firstpic = this.slideList[0].img
        this.xhxy = ts.d.data.xhxy
        this.showslider = true
        setTimeout(() => {
          var gallery = mui('.mui-slider')
          gallery.slider({
            interval: 3000 //自动轮播周期，若为0则不自动播放，默认为0；
          })
        }, 50)
      })
    },
    goSecond(item) {
      this.$router.push({
        name: item.imgurl,
        query: {
          from: '首页',
          word: item.imgword
        }
      })
    }
  }
}
</script>

<style>
.zxp {
  line-height: 30px;
}
</style>
